<template>
  <div class="app-container">
    <!-- 高级查询 -->
    <el-form v-show="searchVisible" ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item label="客户:">

      <el-select  v-model="queryParams.customerNo"
               style="width: 100%" filterable clearable
               	placeholder="请选择客户" >
               	<el-option v-for="option in options.customerOptions" :key="option.id"
               		:label="option.customerName" :value="option.id" />
               </el-select>
               </el-form-item>
      <el-form-item label="运单号:">
        <el-input v-model="queryParams.freightOrderNo" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="收货人手机号:">
        <el-input v-model="queryParams.consigneePhone" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="出库订单号:">
        <el-input v-model="queryParams.sourceOrderNo" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button v-hasPermission="['tms:tFoFreightOrder:insert']" type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button v-hasPermission="['tms:tFoFreightOrder:update']" type="success" icon="el-icon-edit" size="mini" :disabled="isSingle" @click="handleEdit">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button v-hasPermission="['tms:tFoFreightOrder:delete']" type="danger" icon="el-icon-delete" size="mini" :disabled="isMultiple" @click="handleRemove">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button v-hasPermission="['tms:tFoFreightOrder:export']" type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      </el-col>
      <right-toolbar :show-search.sync="searchVisible" @queryTable="handleQuery" />
    </el-row>

    <!-- 数据列表 -->
    <el-table v-loading="loading" :data="page.records" highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="expand">
        <template slot-scope="props" style="padding: 20px 50px;">
          <el-table v-loading="loading" :data="props.row.itemList" highlight-current-row>

            <el-table-column label="商品编码" align="center" prop="materialNo" width="150px" />
            <el-table-column label="商品名称" align="center" prop="materialName" width="150px" />
            <el-table-column label="数量" align="center" prop="quantity" width="150px" />

          </el-table>
        </template>
      </el-table-column>

      <el-table-column label="运单号" align="center" prop="freightOrderNo" >
  <template slot-scope="scope">
                    <a @click="toFreightDetail(scope.row.freightOrderNo)">{{ scope.row.freightOrderNo }}</a>
                  </template>
                   </el-table-column>
      <el-table-column label="发货人" align="center" prop="shipperName" />
      <el-table-column label="发货地址" align="center" prop="shipperAddress" />
      <el-table-column label="发货人电话" align="center" prop="shipperPhone" />

      <el-table-column label="收货人" align="center" prop="consigneeName" />
      <el-table-column label="收货地址" align="center" prop="consigneeAddress" />
      <el-table-column label="预计到货时间" align="center" prop="shippingTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.shippingTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收货人电话" align="center" prop="consigneePhone" />

      <el-table-column label="出发地址" align="center" prop="departure" />

      <el-table-column label="送货地" align="center" prop="destination" />
      <el-table-column label="服务类型" align="center" prop="serviceType" />

      <el-table-column label="运单类型" align="center" prop="orderTypeNo" />

      <el-table-column label="预计发货时间" align="center" prop="carrierTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.carrierTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

      <el-table-column label="运单来源" align="center" prop="orderFromSource" />
      <el-table-column label="销售订单号" align="center" prop="webOrderId" />
      <el-table-column label="出库单号" align="center" prop="sourceOrderNo" />
      <el-table-column label="客户号" align="center" prop="customerNo" />
      <el-table-column label="客户名称" align="center" prop="customerName" />




      <el-table-column label="集装箱号" align="center" prop="containerNo" />
      <el-table-column label="集装箱尺寸" align="center" prop="containerSize" />


      <el-table-column label="是否加急" align="center" prop="isHotYn" />

      <el-table-column label="里程" align="center" prop="miles" />
      <el-table-column label="预计送货天数" align="center" prop="estDeliveryDays" />
      <el-table-column label="结算基于" align="center" prop="settledBasedOn" />


      <el-table-column label="司机电话" align="center" prop="driverCellNo" />

      <el-table-column label="状态" align="center" prop="status" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="创建时间" align="center" prop="createDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="center" prop="updateDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>


      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-hasPermission="['tms:tFoFreightOrder:update']" size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">修改</el-button>
          <el-button v-hasPermission="['tms:tFoFreightOrder:delete']" size="mini" type="text" icon="el-icon-delete" @click="handleRemove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination v-show="page.total>0" :total="page.total" :page.sync="page.current" :limit.sync="page.pageSize" @pagination="handleQuery" />

    <!-- 添加/修改对话框 -->

  </div>
</template>

<script>
import TFoFreightOrderApi from '@/api/tms/TFoFreightOrderApi'
import CustomerApi from '@/api/basic/CustomerApi';
const defaultTFoFreightOrderFormData = {
  freightOrderNo: null,  companyNo: null,  shipperName: null,  shipperAddress: null,  shipperPhone: null,  consigneeNo: null,  customerRefNo: null,  consigneeName: null,  consigneeAddress: null,  shippingTime: null,  consigneePhone: null,  departureName: null,  departure: null,  destinationName: null,  destination: null,  serviceType: null,  transportationType: null,  balanceTypeNo: null,  consigneeLinkType: null,  consigneeLinkMan: null,  paymentType: null,  orderTypeNo: null,  carrier: null,  carrierTime: null,  paymentCompany: null,  insuranceBenefitedParty: null,  accountReceivable: null,  insuranceExpense: null,  carriage: null,  restExpense: null,  isApprove: null,  creater: null,  departmentNo: null,  orderFromSource: null,  webOrderId: null,  sourceOrderNo: null,  customerNo: null,  customerName: null,  noteText: null,  sourceOrderId: null,  dateConfirmed: null,  orderPrefix: null,  orderNo: null,  dateModified: null,  dateClosed: null,  invoiceOfNo: null,  invoiceOfNote: null,  transferSite: null,  hblNo: null,  orderService: null,  orderType: null,  containerNo: null,  containerSize: null,  containerType: null,  jobType: null,  batchWorkorderNo: null,  isHotYn: null,  oblYn: null,  miles: null,  estDeliveryDays: null,  settledBasedOn: null,  warehouseCd: null,  lineCd: null,  vslNm: null,  voyage: null,  recDeptCd: null,  orderDate: null,  invoiceDate: null,  routeDistanceType: null,  transferName: null,  consigneeMobilePhone: null,  insureYn: null,  totInsuredPrice: null,  oriInvQty: null,  oriBillsQty: null,  billQtyPrintYn: null,  settledYn: null,  routeCode: null,  departPort: null,  destPort: null,  departPortAddress: null,  destPortAddress: null,  creceiptCompany: null,  creceiptCompanyKa: null,  editType: null,  distributor: null,  barcodeDistributor: null,  distributorNo: null,  ticketProperty: null,  driverCellNo: null,  consigneeMapId: null,  companyName: null,  contractNo: null,  status: '0',  createDate: null,  updateDate: null,  site: null,  estTransferDate: null,  transferDeptNo: null,  ftlRequestVehicleType: null,  purchaseOrderId: null,  totWeight: null,  unitPrice: null,  suggestPublishAmt: null,  vehicleNo: null,  vehicleModelNo: null,  ftlRequestVehicleLength: null}
export default {
  name: 'TFoFreightOrderList',
  data() {
    return {
      options: {
        sysYnTypeOptions: this.$constant.sysYnTypeOptions
      },
      queryParams: {
        freightOrderNo: null,
        companyNo: null,
        shipperName: null,
        shipperAddress: null,
        shipperPhone: null,
        consigneeNo: null,
        customerRefNo: null,
        consigneeName: null,
        consigneeAddress: null,
        shippingTime: null,
        consigneePhone: null,
        departureName: null,
        departure: null,
        destinationName: null,
        destination: null,
        serviceType: null,
        transportationType: null,
        balanceTypeNo: null,
        consigneeLinkType: null,
        consigneeLinkMan: null,
        paymentType: null,
        orderTypeNo: null,
        carrier: null,
        carrierTime: null,
        paymentCompany: null,
        insuranceBenefitedParty: null,
        accountReceivable: null,
        insuranceExpense: null,
        carriage: null,
        restExpense: null,
        isApprove: null,
        creater: null,
        departmentNo: null,
        orderFromSource: null,
        webOrderId: null,
        sourceOrderNo: null,
        customerNo: null,
        customerName: null,
        noteText: null,
        sourceOrderId: null,
        dateConfirmed: null,
        orderPrefix: null,
        orderNo: null,
        dateModified: null,
        dateClosed: null,
        invoiceOfNo: null,
        invoiceOfNote: null,
        transferSite: null,
        hblNo: null,
        orderService: null,
        orderType: null,
        containerNo: null,
        containerSize: null,
        containerType: null,
        jobType: null,
        batchWorkorderNo: null,
        isHotYn: null,
        oblYn: null,
        miles: null,
        estDeliveryDays: null,
        settledBasedOn: null,
        warehouseCd: null,
        lineCd: null,
        vslNm: null,
        voyage: null,
        recDeptCd: null,
        orderDate: null,
        invoiceDate: null,
        routeDistanceType: null,
        transferName: null,
        consigneeMobilePhone: null,
        insureYn: null,
        totInsuredPrice: null,
        oriInvQty: null,
        oriBillsQty: null,
        billQtyPrintYn: null,
        settledYn: null,
        routeCode: null,
        departPort: null,
        destPort: null,
        departPortAddress: null,
        destPortAddress: null,
        creceiptCompany: null,
        creceiptCompanyKa: null,
        editType: null,
        distributor: null,
        barcodeDistributor: null,
        distributorNo: null,
        ticketProperty: null,
        driverCellNo: null,
        consigneeMapId: null,
        companyName: null,
        contractNo: null,
        status: null,
        createDate: null,
        updateDate: null,
        site: null,
        estTransferDate: null,
        transferDeptNo: null,
        ftlRequestVehicleType: null,
        purchaseOrderId: null,
        totWeight: null,
        unitPrice: null,
        suggestPublishAmt: null,
        vehicleNo: null,
        vehicleModelNo: null,
        ftlRequestVehicleLength: null,
        createTime: null,
        isValid: this.$constant.Y
      },
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
        records: []
      },
      tFoFreightOrderFormDialog: {
        title: '',
        visible: false
      },
      tFoFreightOrderFormData: Object.assign({}, defaultTFoFreightOrderFormData),
      tFoFreightOrderFormRules: {
        freightOrderNo: [{ required: true, message: '不能为空', trigger: 'blur' }],
        status: [{ required: true, message: '不能为空', trigger: 'blur' }],
        createDate: [{ required: true, message: '创建时间不能为空', trigger: 'blur' }],
        updateDate: [{ required: true, message: '更新时间不能为空', trigger: 'blur' }],
      },
      loading: true,
      searchVisible: true,
      multipleSelection: [],
      isSingle: true,
      isMultiple: true
    }
  },
  created() {
    this.queryParams.createTime = this.$route.query.createTime
    this.handleQuery()
    this.loadOptions()
  },
  methods: {
    loadOptions() {
      let that = this;
      CustomerApi.list().then(res => {
      	that.options.customerOptions = res.data

      })
    },
    toFreightDetail(orderId) {
      this.$router.push({
        path: '/tFoFreightOrder/tFoFreightOrderView/' + orderId
      })
    },
    handleAdd() {
      this.openTFoFreightOrderFormDialog()
    },
    handleRemove(row) {
      const ids = row.id || this.multipleSelection.map(item => item.id)
      this.$confirm('是否确认删除数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return TFoFreightOrderApi.remove(ids)
      }).then(() => {
        this.handleQuery()
        this.$message.success('删除成功')
      })
    },
    handleEdit(row) {
      const id = row.id || this.multipleSelection.map(item => item.id)[0]
      this.openTFoFreightOrderFormDialog(id)
    },
    handleQuery() {
      this.loading = true
      TFoFreightOrderApi.page(this.queryParams, this.page).then(response => {
        this.page.records = response.data.records
        this.page.total = response.data.total
        this.loading = false
      }, () => {
        this.loading = false
      })
    },
    handleExport() {
      this.$confirm('是否确认导出数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return TFoFreightOrderApi.exportData(this.queryParams)
      }).then(response => {
        this.$common.download(response.msg)
      })
    },
    openTFoFreightOrderFormDialog(id) {
      this.tFoFreightOrderFormDialog.visible = true
      if (id) {
        this.tFoFreightOrderFormDialog.title = '运单主-修改'
        TFoFreightOrderApi.get(id).then(response => {
          this.tFoFreightOrderFormData = {
            ...this.tFoFreightOrderFormData,
            ...response.data
          }
        })
      } else {
        this.tFoFreightOrderFormDialog.title = '运单主-添加'
      }
    },
    confirmTFoFreightOrderFormDialog() {
      this.$refs['tFoFreightOrderForm'].validate(valid => {
        if (valid) {
          if (this.tFoFreightOrderFormData.id) {
            TFoFreightOrderApi.edit(this.tFoFreightOrderFormData).then(response => {
              this.$message.success('修改成功')
              this.resetTFoFreightOrderFormDialog()
              this.handleQuery()
            })
          } else {
            TFoFreightOrderApi.add(this.tFoFreightOrderFormData).then(response => {
              this.$message.success('添加成功')
              this.resetTFoFreightOrderFormDialog()
              this.handleQuery()
            })
          }
        }
      })
    },
    resetTFoFreightOrderFormDialog() {
      this.tFoFreightOrderFormDialog = {
        title: '',
        visible: false
      }
      this.tFoFreightOrderFormData = Object.assign({}, defaultTFoFreightOrderFormData)
      this.resetForm('tFoFreightOrderForm')
    },
    handleSelectionChange(selection) {
      this.multipleSelection = selection
      this.isSingle = selection.length !== 1
      this.isMultiple = !selection.length
    },
    resetQuery() {
      this.page.current = 1
      this.resetForm('queryForm')
      this.handleQuery()
    }
  }
}
</script>
